import React, { useState, useEffect } from 'react';
import { Layout, Menu, Card } from 'antd';
import {
  Route,
  Switch,
  Redirect,
  useHistory,
  useLocation,
} from 'react-router-dom';
import { UserOutlined } from '@ant-design/icons';
import DropDrag from 'pages/DropDrag';
import UseBoolean from 'pages/UseBoolean';
import UseScroll from 'pages/UseScroll';
import UseVirtualList from 'pages/UseVirtualList';
import logoImg from 'assets/logo.png';
import style from './index.module.scss';

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const Home: React.FC = () => {
  const [activeMenu, setActiveMenu] = useState({
    openKeys: ['drag'],
    selectedKeys: ['drag'],
  });
  const { openKeys, selectedKeys } = activeMenu;
  const history = useHistory();
  const { pathname } = useLocation();

  const handleMenuItemChange = ({ key }: any) => {
    switch (key) {
      case 'drag':
        if (pathname === '/drag') return;
        setActiveMenu({
          openKeys: ['drag'],
          selectedKeys: ['drag'],
        });
        history.push('/drag');
        break;
      case 'useBoolean':
        if (pathname === '/useBoolean') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useBoolean'],
        });
        history.push('/useBoolean');
        break;
      case 'useScroll':
        if (pathname === '/useScroll') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useScroll'],
        });
        history.push('/useScroll');
        break;
      case 'useVirtualList':
        if (pathname === '/useVirtualList') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useVirtualList'],
        });
        history.push('/useVirtualList');
        break;
      default:
        break;
    }
  };

  const handleSubOpenChange = (openKeys: string[]) => {
    setActiveMenu({ openKeys, selectedKeys: [''] });
  };

  useEffect(() => {
    switch (pathname) {
      case '/drag':
        if (pathname === '/drag') return;
        setActiveMenu({
          openKeys: ['drag'],
          selectedKeys: ['drag'],
        });
        break;
      case '/useBoolean':
        if (pathname === '/useBoolean') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useBoolean'],
        });
        break;
      case '/useScroll':
        if (pathname === '/useScroll') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useScroll'],
        });
        break;
      case '/useVirtualList':
        if (pathname === '/useVirtualList') return;
        setActiveMenu({
          openKeys: ['hooks'],
          selectedKeys: ['useVirtualList'],
        });
        break;
      default:
        break;
    }
  }, [pathname]);

  return (
    <Layout className={style.root}>
      <Header className="header">
        <img src={logoImg} alt="notes-logo" className="header-logo" />
        <div className="header-right">Y</div>
      </Header>
      <Layout className="content">
        <Sider>
          <Menu
            mode="inline"
            openKeys={openKeys}
            selectedKeys={selectedKeys}
            style={{ height: '100%', borderRight: 0, backgroundColor: '#ccc' }}
            onClick={handleMenuItemChange}
            onOpenChange={handleSubOpenChange}
          >
            <Menu.Item key="drag" icon={<UserOutlined />}>
              拖拽
            </Menu.Item>
            <SubMenu key="hooks" icon={<UserOutlined />} title="hooks">
              <Menu.Item key="useBoolean" icon={<UserOutlined />}>
                便捷的布尔值切换
              </Menu.Item>
              <Menu.Item key="useScroll" icon={<UserOutlined />}>
                滚动返回顶部
              </Menu.Item>
              <Menu.Item key="useVirtualList" icon={<UserOutlined />}>
                虚拟列表
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Content>
          <Card
            className="content-card"
            bodyStyle={{
              flex: 1,
              overflow: 'auto',
            }}
          >
            <Switch>
              <Redirect exact from="/" to="/drag" />
              <Route path="/drag" component={DropDrag} />
              <Route path="/useBoolean" component={UseBoolean} />
              <Route path="/useScroll" component={UseScroll} />
              <Route path="/useVirtualList" component={UseVirtualList} />
            </Switch>
          </Card>
        </Content>
      </Layout>
      <Footer className="footer">
        ©版权所有，未经作者允许，不得用于商业用途，可以共享学习。
      </Footer>
    </Layout>
  );
};
Home.displayName = 'Home';
export default Home;
